<template>
  <div>
     <!-- 头部 -->
     <Header v-show="$route.meta.show"></Header>
      <!-- 消息中心界面 -->
      <div class="location common">
        <h2>新闻中心</h2>
        <p>NEWS CENTER</p>
      </div>
      <hr>
      <div class="message-container">
        <div class="news-detail">
          <ul class="news-list">
            <li>
              <!-- 时间卡 -->
              <div class="news-item-date">
                <span class="day">12</span>
                <span class="year-month">2023.03</span>
              </div>
              <div class="news-item-content">
                <h2 class="news-h2">正品控宣言：让商品拥有独一无二的身份证</h2>
                <p class="news-p">今天，中国家电及消费电子博览会(Appliance&electronics World Expo，简称AWE)圆满落幕，展会吸
                  引了包括消费电子、智能家电、白色家电、厨房电器、生活电器、环境家电及家电配件等多品类的家电制造商参加，也 为致力于向家电企业提供优质服务的创业者们搭建了展示自己的平台。记者在逛展时遇到杭州沃朴物联科技有限公司
                  CEO袁涌耀先生，拥有无限创业激情的他向记者介绍了公司的主打产品——正品控动态智能防伪标签。下面，就是见证高 科技的时刻啦，且看记者为您秀一下正品控的神奇之处。</p>
              </div>
            </li>
            <li>
              <!-- 时间卡 -->
              <div class="news-item-date">
                <span class="day">12</span>
                <span class="year-month">2023.03</span>
              </div>
              <div class="news-item-content">
                <h2 class="news-h2">正品控宣言：让商品拥有独一无二的身份证</h2>
                <p class="news-p">今天，中国家电及消费电子博览会(Appliance&electronics World Expo，简称AWE)圆满落幕，展会吸
                  引了包括消费电子、智能家电、白色家电、厨房电器、生活电器、环境家电及家电配件等多品类的家电制造商参加，也 为致力于向家电企业提供优质服务的创业者们搭建了展示自己的平台。记者在逛展时遇到杭州沃朴物联科技有限公司
                  CEO袁涌耀先生，拥有无限创业激情的他向记者介绍了公司的主打产品——正品控动态智能防伪标签。下面，就是见证高 科技的时刻啦，且看记者为您秀一下正品控的神奇之处。</p>
              </div>
            </li>
            <li>
              <!-- 时间卡 -->
              <div class="news-item-date">
                <span class="day">12</span>
                <span class="year-month">2023.03</span>
              </div>
              <div class="news-item-content">
                <h2 class="news-h2">正品控宣言：让商品拥有独一无二的身份证</h2>
                <p class="news-p">今天，中国家电及消费电子博览会(Appliance&electronics World Expo，简称AWE)圆满落幕，展会吸
                  引了包括消费电子、智能家电、白色家电、厨房电器、生活电器、环境家电及家电配件等多品类的家电制造商参加，也 为致力于向家电企业提供优质服务的创业者们搭建了展示自己的平台。记者在逛展时遇到杭州沃朴物联科技有限公司
                  CEO袁涌耀先生，拥有无限创业激情的他向记者介绍了公司的主打产品——正品控动态智能防伪标签。下面，就是见证高 科技的时刻啦，且看记者为您秀一下正品控的神奇之处。</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    <Footer v-show="$route.meta.show"></Footer>
  </div>
</template>

<script>
import Header from '@/components/Header/index.vue'
import Footer from '@/components/Footer/index.vue'
export default {
  name: 'HotelNews',
  components: {
    Header,
    Footer
  },
  data () {
    return {
      // hotelRoomInfo: {}
    }
  },

  mounted () {
    // console.log(this.$route.query)
  },

  methods: {

  }
}
</script>

<style lang="less" scoped>
html {
  box-sizing: border-box;
  overflow: hidden;
}

.location {
  overflow: hidden;
  margin-bottom: 20px;
  width: 1200px;
  margin: 5px auto;
}

.location h2 {
  overflow: hidden;
  font-size: 30px;
  font-weight: 400;
  padding: 5px 10px 5px 25px;
  float: left;
}

.location h2::after {
  content: "";
  background-color: #01a1ff;
  display: block;
  width: 4px;
  height: 42px;
  margin-left: -10px;
  margin-top: -40px;
}

.location p {
  float: left;
  padding-top: 25px;
}

hr {
  width: 1200px;
  background-color: black;

  margin: 10px auto;
}

.message-container {

  width: 1200px;
  // background-color: red;
  margin: 0 auto;
  cursor: pointer;

  // 消息列表
  .news-list {
    width: 925px;
    margin: 40px 25px 30px 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;

    li {
      margin-left: 50px;
      .news-item-date {
        float: left;
        width: 125px;
        height: 115px;
        margin-top: 10px;
        margin-right: 16px;
        color: #999;
        position: relative;
        background: url(./images/newsdate_06.jpg) no-repeat;

        .day {
          width: 66px;
          display: block;
          font-size: 45px;
          position: absolute;
          border-bottom: 1px solid #b2b2b2;
          top: 10px;
          left: 20px;
          text-align: center;
        }

        .year-month {
          position: absolute;
          bottom: 25px;
          font-size: 13px;
          left: 30px;
        }
      }

      .news-item-content {
        float: left;
        width: 700px;

        .news-h2 {
          font-size: 20px;
          font-weight: 600;
          margin: 10px 0 20px;
          color: #333333;
          text-align: left;
        }

        .news-p {
          font-size: 14px;
          color: #666666;
          line-height: 24px;
          text-indent: 2em;
          text-align: left;
          text-overflow: ellipsis;
          overflow: hidden;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          display: -moz-box;
          -moz-line-clamp: 2;
          -moz-box-orient: vertical;
          word-wrap: break-word;
          word-break: break-all;
          white-space: normal;
        }
      }
    }

    li:hover {
      .news-item-date {
        background: url(./images/newsdate_03.jpg) no-repeat;
        color: #fff;
      }

      .news-h2 {
        color: #01a1ff;
      }
    }
  }
}
</style>
